<template>
  <div class="login-container">
    <div class="left" />
    <div class="rigth">
      <div class="box">
        <h3>登录</h3>
        <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="0px" class="demo-ruleForm" @validate="validateFn">
          <el-form-item prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="ruleForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="deButton" @click="submitForm(11,22,$event)">登录</el-button>

          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import { sysLoginRequest } from '@/api/user'
export default {
  name: '',
  data() {
    var validateIsArray = (rule, value, callback) => {
      // if (!value) {
      //   callback(new Error('请勾选用户协议'))
      // } else {
      //   callback()
      // }
      // 下面代码： 先保证代码成功，最后再去玩技巧，优化代码
      value ? callback() : callback(new Error('请勾选用户协议'))
    }
    return {
      checked: true,
      ruleForm: {
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: '123456',
        isAgree: false
      },
      rules: {
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^1[1|3|5|6|7|8|9]\d{9}$/, message: '格式错误', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '格式错误', trigger: 'blur' }
        ],
        isAgree: [
          { required: true, message: '请点击协议', trigger: 'change' },
          { 'validator': validateIsArray, 'trigger': 'change' }
        ]
      }
    }
  },
  methods: {

    validateFn() {
      console.log(123)
    },
    submitForm(a, b, e) {
      console.log(a, b, e)
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          /* /conso1e.1og('所有校验通过')
          /后台就是在这个里面发登录请求
          You,前天。调用表单netho
          第一步去官网看axios.发请求代码，找一个post请求的模板过来
          第二步去看接口文档，找登录接口，
          (去问后端)
          /第三部，看接口文档的出参（接口的返回值）和入参（接口需要的参数）  */
          // request.post('/sys/login', {
          //   mobile: this.ruleForm.mobile,
          //   password: this.ruleForm.password
          // }).then(function(response) {
          //   console.log('5', response)
          // }).catch(function(error) {
          //   console.log('6', error)
          // })
          // try {
          //   const res = await sysLoginRequest({ mobile: this.ruleForm.mobile, password: this.ruleForm.password
          //   })
          //   console.log('封装成功', res)
          // } catch (err) {
          //   //
          // }
          this.$store.dispatch('user/loginAcnion', {
            mobile: this.ruleForm.mobile,
            password: this.ruleForm.password
          })
        } else {
          console.log('验证不通过1111')
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
  .login-container {

  height: 100vh;
  width: 100%;
  display: flex;
  .left{
    background-color: #ade43d;
/*  /第一个1有剩余空间是否扩大f1ex-grow
/第二个1，空间不够是否自动缩小f1ex-shrink
/第三个值，f1ex基准宽度（高度） */
    flex: 6;
        /* 1.如果在css里面用了@符号，必须在@前面加个~，
告诉浏
览器，去查找编译之后的图片地址
/background-image:url('~@/assets/common/
login_back.png');
/2.如果使用相对路径，不使用@符号 */
    background-image: url('~@/assets/common/login_back.png');
    border-radius: 50px;
    // overflow: hidden;

    background-size:cover;
    background-repeat:no-repeat;
    background-position:50%;
  }
  .rigth{
    // background-color: #279847;
    flex: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    .box{
      .el-input{
        width: 300px;
      }
      .el-button{
         width: 300px;
      }
    }

  }
  }
</style>>

